<template>
	<view class="content">
		<!-- 顶部文字 -->
		<text class="title">{{ $t('pwdLogin.pwdLogin') }}</text>
		<input class="input-box" :inputBorder="false" v-model="username" :placeholder="$t('pwdLogin.placeholder')" />
		<input type="password" class="input-box" :inputBorder="false" v-model="password" :placeholder="$t('pwdLogin.passwordPlaceholder')" />
		<view class="captcha-box" v-if="captchaBase64">
			<image class="captcha-img" @click="createCaptcha" :src="captchaBase64" mode="widthFix"></image>
			<input type="text" class="input-box captcha" :inputBorder="false" v-model="captcha" :placeholder="$t('pwdLogin.verifyCodePlaceholder')" />
		</view>
		<uni-agreements @setAgree="agree = $event"></uni-agreements>
		<button class="send-btn" :disabled="!canLogin" :type="canLogin ? 'primary' : 'default'" @click="pwdLogin">{{ $t('pwdLogin.login') }}</button>
		<!-- 忘记密码 -->
		<view class="auth-box">
			<text class="link" @click="toRetrievePwd">{{ $t('pwdLogin.forgetPassword') }}</text>
			<text class="link" @click="toRegister">{{ $t('pwdLogin.register') }}</text>
		</view>
		<uni-quick-login :agree="agree" ref="uniQuickLogin"></uni-quick-login>
	</view>
</template>

<script>
	import{ mapMutations ,mapGetters} from 'vuex'
import mixin from '../common/login-page.mixin.js';
export default {
	mixins: [mixin],
	data() {
		return {
			password: '',
			username: '',
			agree: false,
			captchaBase64: '',
			captcha: ''
		};
	},
	computed: {
		canLogin() {
			return this.username.length && this.isPwd;
		},
		isPwd() {
			return /^.{6,20}$/.test(this.password);
		},
		isPhone() {
			return /^1\d{10}$/.test(this.phone);
		}
	},
	methods: {
		...mapMutations('user',["setCookieTcl"]),
		// 页面跳转，找回密码
		toRetrievePwd() {
			uni.navigateTo({
				url: '../pwd-retrieve/pwd-retrieve?phoneNumber=' + (this.isPhone ? this.username : '') + '&phoneArea=' + this.currenPhoneArea
			});
		},
		/**
		 * 密码登录
		 */
		pwdLogin() {
			if (!this.agree) {
				return uni.showToast({
					title: this.$t('common').noAgree,
					icon: 'none'
				});
			}
			// 下边是可以登录

			// 进行加密
			const encryptPwd = this.$utils.encrypt(this.password);
			uniCloud.callFunction({
				name: 'uni-id-cf',
				data: {
					action: 'login',
					params: {
						username: this.username,
						password: encryptPwd,
						captcha: this.captcha
					}
				},
				success: ({ result }) => {
					console.log(result);
					if (result.code === 0) {
						// T学堂登录
						uni.request({
							url: 'https://tlearning-sdbg.tcl.com/api/user/login.shtml',
							method: 'GET',
							data: {
								ts: new Date().getTime(),
								loginId: this.username,
								password: encryptPwd,
								siteId: '0002',
								verifyCode: '',
								encrypted: true,
								language: 'zh_CN',
								expiration: 10 // 有效期
							},
							success: reqRes => {
								const {
									data: { code, jsessionid, jsessiontoken, data }
								} = reqRes || {};
								let msg = '';
								if (code == 0) {
									if (!jsessionid || !jsessiontoken || !data) {
										msg = '验证T学堂登录失败,返回参数异常';
										return;
									}
									// 创建Cookie
									const cookieObj = {
										SESSION: jsessionid,
										JSESSIONTOKEN: jsessiontoken,
										SIAMTGT: data,
										USERTOKEN: this.username
									};
									let cookieStr = '';
									for (let [key, value] of Object.entries(cookieObj)) {
										cookieStr += `${key}=${value};`;
									}
									if (cookieStr) {
										// 保存到store
										this.setCookieTcl(cookieStr);
										 //保存到本地持久化存储
										uni.setStorageSync('COOKIE_TCL', cookieStr)
										// 注册登录
										this.loginSuccess(result);
									}
								} else {
									msg = '验证T学堂登录失败,请检查账号密码是否有误';
								}
								if (!msg) return;
								uni.showModal({
									content: msg,
									showCancel: false
								});

							}
						});
					} else {
						if (result.needCaptcha) {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							});
							this.createCaptcha();
						} else {
							uni.showModal({
								title: this.$t('common').error,
								content: result.msg,
								showCancel: false,
								confirmText: this.$t('common').gotIt
							});
						}
					}
				}
			});
		},
		createCaptcha() {
			uniCloud.callFunction({
				name: 'uni-id-cf',
				data: {
					action: 'createCaptcha',
					params: {
						scene: 'login'
					}
				},
				success: ({ result }) => {
					if (result.code === 0) {
						this.captchaBase64 = result.captchaBase64;
					} else {
						uni.showModal({
							content: result.msg,
							showCancel: false
						});
					}
				}
			});
		},
		/* 前往注册 */
		toRegister(e) {
			console.log(e);
			uni.navigateTo({
				url: '/pages/ucenter/login-page/register/register'
			});
		}
	}
};
</script>

<style>
@import url('../common/login-page.css');

.auth-box {
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
}

.auth-box .link {
	font-size: 26rpx;
}

.login-text-sub {
	color: #8a8f8b;
}

.toRegister {
	margin-top: 80px;
	width: 600rpx;
}
.captcha-box {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.captcha-img {
	margin: 15px 15px 0 0;
	width: 250rpx;
}
.captcha {
	width: 350rpx;
}
</style>
